以前在 JavaScript 沒有模組化的時候，一樣的程式碼會在好幾個檔案內重複出現，非常的沒效率，直到有 CommonJS & ESM 這兩個東西。

CommonJS

如果你有玩過 Node.js ，應該會很常看到使用 require & module.exports 模組化，這就是 CommonJS，早期的名字是 ServerJS。

因為 CommonJS 這個模組化標準被 Node.js 採用，所以在 Node 上常會這麼頻繁的看到，不過有個問題是：這種寫法不被瀏覽器採用。

（這邊就不細講 require & module.exports 的寫法，再請有興趣的朋友們自己 GOOGLE 了。）

ESM

2015 前，JS 並沒有制定模組化的規範，所以社群內發展了幾種模組化規劃，包括 AMD、CommonJS、UMD 等，這些模組化方式都有自己的語法及規範，直到之後 ESM (ES Module) 的出現，我們不再需要引入其他函式庫，直接使用 import 與 export 就可以。

如果想要在瀏覽器中使用，必須要在 <script> 加上 type="module"

<script src="./app.js" type="module"></script>

export

export 分成「具名」及「預設」匯出：

// 具名匯出
export const price = 10;

// 預設匯出
export default 1;

import

import 會根據 export 的方式而做改變，

// 具名匯出
export const price = 10;

// 匯入
import { price } from "./app.js";

// ===============================

// 預設匯出
export default 1;

// 匯入
import number from "./app.js"
console.log(number); // 1

除此之外可以使用 as 重新命名。

// 改為 milkPrice
import { price as milkPrice } from "./app.js";
console.log(milkPrice);

使用上的缺點

export 和 import 雖然看起來極度舒適，但其實使用上還是有缺點的，例如要起一個 server 才能跑、每支 JS 都要加 type="module"、npm 路徑問題等等，為了因應這些問題，所以我們才會使用 webpack 幫我們進行打包，讓開發更容易。

有使用過 vite 的朋友們或許有看過 Native ES Modules 一詞，這邊引用 Vite 怎麼能那麼快？從 ES modules 開始談起 作者的一段話：

採用原生的 ESM 載入機制，就是 Native ESM，讓瀏覽器來幫你處理這些 import 跟 export 的東西。

等等，我剛特地強調原生這兩個字，難道說還有其他東西不是原生的嗎？是的，沒錯喔。你平常在用的 webpack 或者是類似的工具，別忘了它的名稱叫做「bundler」，就是要把你的 JS 檔案跟 dependencies 打包在一起。儘管你在寫程式的時候是用 import 跟 export 沒錯，但是在輸出時很有可能已經被 babel 或者是 webpack 轉成 CommonJS 或是其他形式了，而且外面還有再包一層來負責解析 require 這一些語法 ...

對於 ES modules 及 vite 有興趣的朋友非常建議參考看看這篇文章。

參考資料

• NodeJS 與 CommonJS 到 ESM 與 Webpack
• 完全解析 JavaScript import、export
• Vite 怎麼能那麼快？從 ES modules 開始談起
• ES2015(ES6) - ESM模組
• 什麼是 ESM(ES6 Modules or JavaScript Modules) 呢？